<template>
    <div class="comfirm flex-a">
        <div class="num">共1件</div>
        <div class="price">合计 <text>￥{{ payPrice }}</text></div>
        <!-- <nut-button shape="square" type="info" @click="pay">支付</nut-button> -->
        <!-- <div class="btn" @click="pay">支付</div> -->
        <nut-button shape="square" class="btn" :loading="loading" color="#8DCF00" type="info"
            @click="pay">支付</nut-button>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro'
import { reactive, toRefs, onMounted, onUnmounted } from 'vue';
import mitt from "./../../../../utils/mitt";
import { toPay, changePay } from '../../../../api/index'
export default {
    components: {
    },
    setup() {
        const data = reactive({
            payPrice: 0,
            couponId: '',
            payType: 'wx',
            remark: '',
            code: '',
            loading: false,
        });
        onMounted(() => {
            mitt.on("pay", (val) => {
                data.payPrice = val
            })
            mitt.on("code", (val) => {
                data.code = val
            })
            mitt.on("couponId", (val) => {
                data.couponId = val
            })
            mitt.on("payType", (val) => {
                data.payType = val
            })
            mitt.on("remark", (val) => {
                data.remark = val
            })
        });
        onUnmounted(() => {

        });
        const pay = () => {
            data.loading = true
            const router = useRouter();
            Taro.removeStorage({
                key: 'userId',
                success: function (res) {
                    console.log(res)
                }
            })
            if (router.params.orderId) {
                Taro.getStorage({
                    key: 'user',
                    success: function (res) {
                        if (data.payType == 'wx') {
                            toPay({ price: data.payPrice, remark: data.remark, did: router.params.orderId, openid: res.data.passwordMd5, coupId: data.couponId, title: '11111', code: data.code }).then(response => {
                                if (response.resultCode == 200) {
                                    data.loading = false
                                    Taro.requestPayment({
                                        timeStamp: response.data.timeStamp,
                                        nonceStr: response.data.nonceStr,
                                        package: response.data.package,
                                        signType: response.data.signType,
                                        paySign: response.data.paySign,
                                        success: function (res) {
                                            Taro.redirectTo({ url: '/packageA/pages/orderList/index?status=99' })
                                        },
                                        fail: function (res) {
                                            Taro.redirectTo({ url: '/packageA/pages/orderList/index?status=99' })
                                        }
                                    })
                                }
                            })
                        } else if (data.payType == 'ye') {
                            changePay({ orderNo: router.params.orderId, remark: data.remark, money: data.payPrice, coupId: data.couponId }).then(res => {
                                if (res.resultCode == 200) {
                                    Taro.showToast({
                                        title: '支付成功',
                                        icon: 'success',
                                        duration: 2000
                                    })
                                    Taro.redirectTo({ url: '/packageA/pages/orderList/index?status=99' })
                                } else if (res.resultCode == 500) {
                                    Taro.showModal({
                                        title: '提示',
                                        content: res.message,
                                        showCancel: false,
                                    })
                                }
                            })
                        }
                    }
                })
            }
        }
        return {
            ...toRefs(data), pay
        }
    }
};
</script>


<style lang="scss">
.comfirm {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    width: 100%;

    .nut-button {
        width: 200rpx;
        border-radius: 10rpx;
    }

    .num {
        color: #7C7D76;
        font-size: 20rpx;
        margin: 0 15rpx 0 100rpx;
    }

    .price {
        font-size: 28rpx;
        color: #000;
        font-weight: bold;

        text {
            color: #FF5B38;
            margin-left: 10rpx;
        }
    }

    .btn {
        background: #8DCF00;
        color: #fff;
        width: 180rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        border-radius: 60rpx;
        margin-left: 150rpx;
        white-space: nowrap;
    }
}
</style>